<template>
  <div class="ele-form-dynamic">
    <el-collapse v-model="activeNames">

    <div
        v-for="(dataItem, i) of list"
        :key="i"
        class="ele-form-dynamic-section editForm"
    >
      <el-collapse-item :title="dataItem.title" :name="i" class="game-select">
        <template>
          <div v-for="(item, index) of computedColumns" :key="index">
             <h4>{{item.label}}</h4>
              <component
                  :is="item.type || 'el-input'"
                  v-model="list[i][item.valueKey]"
                  :style="item.style"
                  @change="emitVal"
                  v-bind="getAttrs(item.attrs)"
                  @input="validateOneValue($event, i, item.valueKey)"
                  :class="item.class"
              >
                <!-- 作用域插槽 -->
                <template
                    v-for="(render, key) of item.scopedSlots"
                    v-slot:[key]="data"
                >
                  <extend-slot :data="data" :key="key" :render="render" />
                </template>

                <!-- 非作用域插槽 -->
                <template v-for="(render, key) of item.slots" v-slot:[key]>
                  <extend-slot :key="key" :render="render" />
                </template>
              </component>
<!--            <span
                v-if="index !== computedColumns.length - 1"
                class="ele-form-dynamic-delimiter"
            >{{ delimiter }}</span>-->
          </div>
        </template>
        <template v-if="!disabled">
          <el-button   v-if="isShowDelete"  @click="removeRow(i)">删除内容</el-button>
          <el-button type="primary" v-if="i === list.length - 1" @click="addRow">新增</el-button>
<!--          <i
              @click="addRow"
              v-if="i === list.length - 1"
              class="ele-form-dynamic-icon el-icon-circle-plus-outline"
          ></i>-->
          <!-- 当只有1条时, 不显示删除 -->
<!--          <i
              v-if="isShowDelete"
              @click="removeRow(i)"
              class="ele-form-dynamic-icon el-icon-remove-outline"
          ></i>-->
          <!-- 仅在最后一条显示添加 -->

        </template>

      </el-collapse-item>
    </div>
    </el-collapse>
  </div>
</template>

<script>
// 本组件的重点在于单列和多列对数据的处理不一致
// 单列基本类型数组, 多列是对象数组
import validate from './validate';
import ExtendSlot from 'vue-ele-form/lib/ExtendSlot';
import EleFormColor from 'vue-ele-form/lib/components/EleFormColor';
import EleFormSlider from 'vue-ele-form/lib/components/EleFormSlider';
import EleFormInput from 'vue-ele-form/lib/components/EleFormInput';
import EleFormSelect from 'vue-ele-form/lib/components/EleFormSelect';
const equal = require('fast-deep-equal');
export default {
    name: 'FormDynamic',
    mixins: [validate],
    components: {
        'color': EleFormColor,
        'slider': EleFormSlider,
        'd-input': EleFormInput,
        'd-select': EleFormSelect,
        ExtendSlot
    },
    props: {
    // 值
        value: {
            type: Array,
            required: true,
            default: () => []
        },
        // 禁用
        disabled: {
            type: Boolean,
            default: false
        },
        // 校检对象
        rules: [Object, Array],
        // 列
        columns: {
            type: [Object, Array],
            validator (columns) {
                if (Array.isArray(columns)) {
                    const isError = columns.some((item) => !item.valueKey);
                    if (isError) {
                        // eslint-disable-next-line
            console.error('[ele-form-dynamic warn]: columns当为数组时, 必须包含valueKey属性')
                        return false;
                    }
                }
                return true;
            }
        },
        // 分割符
        delimiter: {
            type: String,
            default: '-'
        },
        // 是否过滤空
        isFilterEmpty: {
            type: Boolean,
            default: true
        },
        // 占位符
        placeholder: {
            type: String
        }
    },
    data () {
        return {
            // value的拷贝, 因为需要过滤空值
            list: [],
            activeNames: []
        };
    },
    watch: {
        value: {
            handler (value) {
                const filterVal = this.filterList(value);
                if (!equal(this.filteredList, filterVal)) {
                    this.list = JSON.parse(JSON.stringify(value));
                    console.log(this.$props);
                }
                if (!this.disabled && !this.list.length) {
                    this.addRow();
                }
            },
            immediate: true
        }
    },
    computed: {
        isShowDelete () {
            const isEmpty = (val) => {
                switch (typeof val) {
                case 'string':
                    return val === '';
                case 'object':
                    return JSON.stringify(val) === '{}';
                }
            };
            return this.list.length > 1 || !isEmpty(this.list[0]);
        },
        // 无论是单列还是多列, 统一转为数组
        computedColumns () {
            if (this.columns) {
                return Array.isArray(this.columns) ? this.columns : [this.columns];
            } else {
                return [{
                    type: 'el-input',
                    attrs: {
                        placeholder: this.placeholder
                    }
                }];
            }
        },
        // 过滤后的列表
        filteredList () {
            const list = this.list;
            return this.filterList(list);
        }
    },
    mounted () {
    },
    methods: {
        filterList (list) {
            return this.isFilterEmpty ? list.filter(item => this.computedColumns.length === 1 ? item !== '' : JSON.stringify(item) !== '{}') : list;
        },
        // 获取属性 (为了将disabled统一设置)
        getAttrs (attrs = {}) {
            return Object.assign(attrs, { disabled: this.disabled, placeholder: attrs.placeholder || this.placeholder });
        },
        // 移除一行
        removeRow (index) {
            this.list.splice(index, 1);
            this.emitVal();
        },
        // 抛出改变
        emitVal () {
            this.$emit('input', this.filteredList);
        },
        // 新增一行
        addRow () {
            // 单列和多列数据不一样
            // 单列是数组 [a1, a2], 多列是对象 [{name: xx, age: xx}], 所以默认值不相同
            const column = this.computedColumns.length === 1 ? '' : {};
            console.log(column);
            this.list.push(column);
        }
    }
};
</script>

<style lang="scss" scoped>
.ele-form-dynamic {
  display: inline-block;
  width: 100%;
}
.ele-form-dynamic-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.ele-form-dynamic-section:last-child {
  margin-bottom: 0;
}
.ele-form-dynamic-icon {
  font-size: 22px;
  color: #606266;
  padding-left: 10px;
}
.ele-form-dynamic-delimiter {
  padding: 0 10px;
  color: #606266;
}
.ele-form-dynamic .el-input {
  width: inherit;
}
.ele-form-dynamic-error .el-input__inner,
.ele-form-dynamic-error .el-input__inner:focus,
.ele-form-dynamic-error .el-textarea__inner,
.ele-form-dynamic-error .el-textarea__inner:focus {
  border-color: #f56c6c;
}
.game-select {
  width: 100%;
  background-color: #eef0f2;
  margin-bottom: 0 !important;
  .selected {
    height: 32px;
    border-radius: 2px;
    background-color: #eef0f2;
    line-height: 32px;
    display: flex;
    padding-left: 10px;
    align-items: center;

    .value {
      flex: 1;
      height: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;
    }

    i {
      width: 32px;
    }
  }
}
</style>
